<template>
  <el-card class="contaniar">
    <!-- 头部 -->
    <div>
      <el-row type="flex" justify="space-between">
        <el-col :span="22" type="flex" justify="space-between">
          <span style="margin-right: 10px">学科名称</span>
          <el-input
            v-model="queryData.subjectName"
            placeholder=""
            style="width: 180px"
            size="small"
            label="学科名称"
            @clear="search"
          />
          <el-button
            size="small"
            type="primary"
            style="margin-left: 10px"
            @click="qingC"
          >清除</el-button>
          <el-button
            size="small"
            type="primary"
            @click="search"
          >搜索</el-button>
        </el-col>
        <el-col :span="2">
          <el-button type="success" @click="addSub">新增学科</el-button>
        </el-col>
      </el-row>
    </div>
    <!-- 数据一共多少条 -->
    <div class="title" style="background:#f4f4f5;height:40px;line-height: 40px;padding-left:10px">
      <i class="el-icon-info" />
      数据一共{{ total }}条
    </div>
    <hr>
    <!-- 数据表单 -->
    <el-table :data="list" style="width: 100%">
      <el-table-column type="index" label="序号" width="80" />
      <el-table-column prop="subjectName" label="学科名称" width="180" />
      <el-table-column prop="username" label="创建者" width="140" />
      <el-table-column prop="addDate" label="创建日期" width="220">
        <template slot-scope="{ row }">
          {{ row.addDate }}
        </template>
      </el-table-column>
      <el-table-column prop="isFrontDisplay" label="前台是否显示" width="140">
        <template slot-scope="{ row }">
          {{ row.isFrontDisplay ? "是" : "否" }}
        </template>
      </el-table-column>
      <el-table-column prop="twoLevelDirectory" label="二级目录" width="140" />
      <el-table-column prop="tags" label="标签" width="140" />
      <el-table-column prop="totals" label="题目数量" width="140" />
      <el-table-column label="操作" width="240">
        <template slot-scope="{ row }">
          <!-- {{ row }} -->
          <el-button type="text" @click="toDire(row)">学科分类</el-button>
          <el-button type="text" @click="toTags(row)">学科标签</el-button>
          <el-button type="text" @click="edit(row)">修改</el-button>
          <el-button type="text" @click="delSub(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 页码 -->
    <el-pagination
      style="margin-left: 900px"
      background
      :current-page="queryData.page"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="queryData.pagesize"
      layout="prev, pager, next,jumper,sizes"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

    <!-- 增加学科 -->
    <el-dialog
      :title="isEdit ? '修改学科' : '添加学科'"
      :visible.sync="showDialog"
      width="30%"
      @close="qvxiao"
    >
      <el-form ref="form" :model="formData" :rules="rules" class="dialog-h">
        <el-form-item label="学科名称" prop="subjectName">
          <el-input v-model.trim="formData.subjectName" />
        </el-form-item>
        <el-form-item label="是否显示" style="padding-left: 10px">
          <el-switch
            v-model="formData.isFrontDisplay"
            active-color="#13ce66"
            inactive-color="#ff4949"
          />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button size="small" @click="qvxiao">取 消</el-button>
        <el-button size="small" type="primary" @click="btnOK">确 定</el-button>
      </div>
    </el-dialog>
  </el-card>
</template>

<script>
import {
  subjectsList,
  subjectsAdd,
  subjectsEdit,
  subjectsDel,
  subjectsDeta,
  simpleSub
} from '@/api/subjects/subjects'
// import { xiangDirectorys } from "@/api/subjects/directorys";
export default {
  name: 'List',
  data() {
    return {
      // 1.定义一个数据接收的仓库
      list: [],
      value: '',
      // title: "",
      total: 0, // 数据总数
      queryData: {
        page: 1,
        pagesize: 10,
        subjectName: '',
        isFrontDisplay: ''
      },
      Body: {
        oldPassword: '', // 旧密码
        newPassword: '' // 新密码
      },
      showDialog: false, // 添加学科弹窗
      // 学科弹窗校验
      formData: {
        enVisible: 0, // 开启权限
        subjectName: '', // 学科名称
        isFrontDisplay: '' // 是否显示
      },
      rules: {
        subjectName: [{ message: '不能为空', required: true, trigger: 'blur' }],
        isFrontDisplay: [
          { message: '不能为空', required: true, trigger: 'blur' }
        ]
      }
    }
  },
  // 判断是添加还是修改
  computed: {
    isEdit() {
      return !!this.formData.id
    }
  },
  created() {
    // 3. 调用方法
    this.initData()
  },
  methods: {
    // 2.定义方法
    async initData() {
      const { items, counts } = await subjectsList(this.queryData)
      this.list = items
      console.log(items)
      this.total = counts
      items.map((item) => {
        const arr1 = item.addDate.replace('T', ' ')
        const arr2 = arr1.replace('.000Z', ' ')
        // console.log(arr2);
        item.addDate = arr2
      })
    },
    // 搜索
    search() {
      this.initData(this.queryData)
    },
    // 清除搜索框
    qingC() {
      this.queryData.subjectName = ''
      this.initData(this.queryData)
    },
    // 分页
    handleSizeChange(val) {
      this.queryData.pagesize = val
      this.initData()
    },
    handleCurrentChange(val) {
      this.queryData.page = val
      this.initData()
    },
    // 点击弹窗的确定（添加提交、修改提交）
    async btnOK() {
      await this.$refs.form.validate()
      if (this.isEdit) {
        console.log(1)
        // console.log(this.formData);
        await subjectsEdit(this.formData)
      }
      if (!this.isEdit) {
        console.log(2)
        console.log(this.formData)
        await subjectsAdd(this.formData)
      }
      this.$message.success('操作成功')
      this.initData()
      this.qvxiao()
    },
    qvxiao() {
      this.$refs.form.resetFields()
      this.formData = {}
      this.showDialog = false
    },
    // 删除
    async delSub(id) {
      // console.log(id);
      await this.$confirm('确定删除')
      await subjectsDel(id)
      this.$message.success('删除成功')
      if (this.queryData.page !== 1 && this.queryData.size === 1) {
        this.queryData.page--
      }
      this.initData()
    },
    // 修改(获取数据回显！)
    async edit(val) {
      const res = await subjectsDeta(val.id)
      this.formData = res
      this.showDialog = true
    },
    // 添加
    async addSub() {
      this.showDialog = true
      console.log(this.formData)
    },
    // 学科分类按钮
    async toDire(val) {
      console.log(val)
      // 传值
      this.$router.push(
        `/subjects/directorys?directoryName=${val.subjectName}&subjectID=${val.id}`
      )
      await simpleSub(val)
    },
    // 学科标签按钮
    async toTags(val) {
      console.log(val)
      this.$router.push(`/subjects/tags?id=${val.id}&name=${val.subjectName}`)
      await simpleSub(val)
    }
  }
}
</script>

<style scoped lang="less">
.contaniar {
  margin: 20px;
}
.title {
  margin-top: 10px;
}
/deep/ .el-dialog {
  border-radius: 10px;
  .el-dialog__header {
    background: #409eff;
    border-radius: 10px 10px 0 0;
    .el-dialog__title {
      color: #fff;
    }
  }
  .el-dialog__body {
    padding-bottom: 0;
    .el-input {
      width: 300px;
    }
  }
}
</style>
